<template>
	<div>
		<div class="app-container">
			<TopInfo />
			<Search :lookup="data.lookup" @investigate="inves" />
		</div>
		<div class="app-container">
			<el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }" height="700"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="adv_title" :label="$t('advment.record.title')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.adv_title || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.machine_id || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="res_title" :label="$t('source.name')" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.res_title || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="type" :label="$t('source.type')">
					<template #default="scope">
						{{ $t(getPlevel.materialtype(scope.row.type)) }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('advment.record.playCount')">
					<template #default="scope">
						{{ scope.row.remain_times }} / {{ scope.row.total_times }}
					</template>
				</el-table-column>
				<el-table-column prop="position" :label="$t('machine.custom.placement')">
					<template #default="scope">
						{{ $t(getPlevel.getadvpos(2, scope.row.position)) }}
					</template>
				</el-table-column>
				<el-table-column prop="screen_full" :label="$t('machine.custom.advertisePosition')">
					<template #default="scope">
						{{ scope.row.screen_full == 1 ? $t('machine.custom.fullScreen') : $t('machine.custom.homeAds') }}
					</template>
				</el-table-column>
				<el-table-column prop="play_time" :label="$t('advment.record.playTime')">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.play_time, 3) }}
					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.advrec" @exposeData="current" @fraction="fraction" />
		</div>
	</div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import getPlevel from '@/utils/level'
import { getRecordList } from '@/api/machine_custom';

let data = reactive({
	mtloading: false, // 加载
	lookup: [ // 筛选栏
		{ title: $t('machine.code'), type: 'mId', value: '', key: 'm_id' },
		{ title: $t('advment.record.title'), type: 'input', value: '', key: 'adv_title' },
		{ title: $t('advment.record.resTitle'), type: 'input', value: '', key: 'res_title' },
	],
	advrec: { // 筛选条件
		machine_id: '',
		adv_title: '',
		res_title: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})

// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getRecordList(data.advrec).then(res => {
		data.mtloading = false
		if (res.state == 200) {
			data.list = res.data.data
			data.total = res.data.total
		}
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.advrec[key] = e[key]
	}
	data.advrec.page = 1
	data.advrec.pageNum = 15
	getlist()
}

// 页数回调
let current = (e) => {
	data.advrec.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.advrec.pageNum = e
	getlist()
}

getlist()

</script>